<script setup>
import { ChatLineRound, Male } from '@element-plus/icons-vue'
const format1 = "asdasdd"
</script>

<template>
  <div class="food_body">
    <el-row gutter="40">
      <el-col :span="12">
        <div class="demo-progress">
          <el-progress :percentage="100" :indeterminate="true"><el-button text>Vue3</el-button> </el-progress>
          <el-progress :percentage="50" :indeterminate="true"><el-button text>Node</el-button></el-progress>
          <el-progress :percentage="100" status="success" :indeterminate="true" >Express</el-progress>
        </div>

      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <el-statistic title="Daily active users" :value="268500" />
          </el-col>
          <el-col :span="6">
            <el-statistic :value="138">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  Ratio of men to women
                  <el-icon style="margin-left: 4px" :size="12">
                    <Male />
                  </el-icon>
                </div>
              </template>
              <template #suffix>/100</template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic title="Total Transactions" :value="172000" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="Feedback number" :value="562">
              <template #suffix>
                <el-icon style="vertical-align: -0.125em">
                  <ChatLineRound />
                </el-icon>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.food_body {
  color: rgb(255, 255, 255);
}

.demo-progress>* {
  margin-top: 10px;
}
</style>